<!DOCTYPE html>
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!-->
<html class="js no-touch csstransitions" lang="en">
<!--<![endif]-->
	<include file="Public:Head" />
	<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/jquery.dataTables.min.css">
	<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/buttons.dataTables.min.css">
	<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/buttons.bootstrap.min.css">
	<body class="no-trans fixed-header-on" style="height:100%">
		<if condition="$condition eq 1" >
			<include file="Public:loginHeader" />
		<else />
			<include file="Public:notloginHeader" />
		</if>
		<script type="text/javascript" language="javascript" src="__PUBLIC__/js/jquery.dataTables.min.js"></script>
		<script type="text/javascript" language="javascript" src="__PUBLIC__/js/dataTables.buttons.min.js"></script>
		<script type="text/javascript" language="javascript" src="__PUBLIC__/js/buttons.bootstrap.min.js"></script>
		<script type="text/javascript" language="javascript" src="__PUBLIC__/js/buttons.colVis.min.js"></script>
		<script type="text/javascript" language="javascript" src="__PUBLIC__/js/buttons.html5.min.js"></script>
		 <!-- 正文部分 -->
		<div id="aboutSec" class="section clearfix " style="min-height: 85.5%; margin-top: 5%;">
			<div class="container" style="width:1620px;">
				<div class="row">
					<div class="col-md-12">
						<h1 id="search" class="title text-center"><span>PIM</span></h1>
						<p class="lead text-center">Primer Information Manager</p>
						
						<div class="row">
						
							<div class="col-md-1"></div>
							<div class="col-md-10">

								<div class="main">
									<form action="{:U('Search/search')}" method="POST" id="search-form" name="form">
									
										<br /><br />
										
										<div class="main_parameters">
										
											<fieldset class="basic">
												<legend>Keyword Search</legend>									
												<div style="margin: 20px;">
													<span style="padding: .2em .6em .3em;margin-left:20px; font-size: 85%;">Search By Species </span>
														<select name="searchSpecies" id="search-type" class="form-control-static" style="width:140.63px;height: 34px;border-radius: 4px;border: 1px solid #ccc;padding-left: 6px">
															<option value="Human" selected="selected">Human</option>
															<option value="Mouse">Mouse</option>
															<option value="Others">Others</option>
														</select>
													</span>
													
													<button type="button" class="btn btn-default" title="Reset query" style="float:right;" onclick="mySearchReset()"> Reset </button> 

													<div class="btn-group" style="float:right;">
														<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
															<span>Multi examples</span>
															<span class="caret"></span>
														</button>
														<ul class="dropdown-menu" style="min-width:100%;">
															<li><a onclick="primeridMultiExample();"> Primer ID</a></li>
															<li><a onclick="geneMultiExample();"> Gene</a></li>
															<li><a onclick="locationMultiExample();"> Location</a></li>		
															<li><a onclick="identifierMultiExample();"> Identifier</a></li>
														</ul>
													</div>

													<div class="btn-group" style="float:right;">
														<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
															<span>Single examples</span>
															<span class="caret"></span>
														</button>
														<ul class="dropdown-menu" style="min-width:100%;">
															<li><a onclick="primeridSingleExample();"> Primer ID</a></li>
															<li><a onclick="geneSingleExample();"> Gene</a></li>	
															<li><a onclick="locationSingleExample();"> Location</a></li>
															<li><a onclick="identifierSingleExample();"> Identifier</a></li>
														</ul>
													</div>
												</div>
												
												<br />
												<div style="margin-left: 20px; ">
													<span class="label" style="margin-top: -38px; "></span>
													<span>
														<input type="text" id="search-text" name="searchText" class="form-control" style="margin:auto; width: 550px; height: 33px;" value="DNA_HM_001" autocomplete="off" onfocus="focusOn(this)" onblur="searchCheck(this)" required />
														<div class="error-tips error-password" style="margin:auto; width: 550px; display:none;"></div>
														<input type="text" id="search-field" name="searchField" style="display: none" autocomplete="off" value="gene">
														<br />
													</span>
												</div>
												
												<div style="text-align: center;">
													<button type="button" class="btn btn-default" style="width:140.63px;height: 34px;" onclick="submitSearch()">Search</button>
													<br />
												</div>
												<br />
												
												<span class="label"></span>
												<span id="keyword_err" class="input"></span>
												<br />

											</fieldset>
										</div> 
									</form>	
								</div>
								<div class="col-md-1"></div>
							</div>	
						</div>
					</div>
				<div class="row">
					<div class="col-md-12">
				        <div id="blast_output"></div>
					</div>
				</div>
			</div>
		</div>
		
		<footer id="footer"  >

		</footer>


		<script>
			$('#Modal').on("show.bs.modal", function(event) {
				$('#modal-login').attr('style', 'display:block');
				$('#modal-register').attr('style', 'display:none');
			})

			$(document).ready(function() {
				
				$.ajax({
					type: "POST",
					url: "/primer/home/blast/getPrimer",
					dataType: "html",
					data: {
						"time": new Date().getTime(),
					},
					async: true,
					success: function(html) {
						// console.log(html);
						$('#blast_output').html(html);
						$('#blast_all').dataTable({
		                    "fixedHeader": true,
		                    "dom": 'Blfrtip',
		                    "lengthMenu": [[15, 30, 50, 100,-1], [15, 30, 50,100, "All"]],
		                    "buttons": ['copy', 'csv', 'colvis'],
							// "columnDefs": [
							// 	{
							// 		"targets": [ 5, 6, 7, 8 ],
							// 		"visible": false
							// 	}
							// ],
	                    });	
					}
				})
			})
		</script>
	</body>
</html>
